import QtQuick

Item{
    property alias model: listView.model
    Rectangle{
        id: navigation
        width: 140
        height: parent.height
        color: "#e6e6e6"
        ListView{
            id: listView
            anchors.fill: parent
            anchors.margins: 6
            clip: true
            model: 4
            delegate: Item{
                width: listView.width
                height: 30
                Text{
                    anchors.left: parent.left
                    anchors.leftMargin: 18
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: 6
                    text: title
                    elide: Text.ElideRight
//                    wrapMode: Text.WrapAnywhere
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        parent.ListView.view.currentIndex = index
                        loader.source = src
                    }
                }
            }
            highlight: Item{
                height: 30
                width: listView.width
                Rectangle{
                    anchors.left: parent.left
                    anchors.leftMargin: 6
                    width: parent.width - 12
                    height: parent.height
                    radius: 6
                    color: "#bfbfbf"
                    Rectangle{
                        width: 4
                        anchors{
                            left: parent.left
                            top: parent.top
                            bottom: parent.bottom
                            margins: 6
                        }
                        color: "#1f9ae7"
                    }
                }
            }
        }
    }

    Loader{
        id: loader
        anchors.left: navigation.right
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        clip: true
    }

    Component.onCompleted:{
        if(model.count > 0)
            loader.source = model.get(0).src
    }
}
